body[light-mode="light"] {
	color: var(--black);
	background-color: var(--white);
}

body[light-mode="light"] header a {
	color: unset;
}

body[light-mode="light"] footer p {
	color: var(--black);
}

body[light-mode="light"] .dark-mode-toggle span:nth-child(1) {
	background-color: var(--black);
}

body[light-mode="light"] .dark-mode-toggle span:nth-child(2) {
	left: 1rem;
	background-color: var(--white);
}

body[light-mode="light"] .button {
	color: var(--black);
	border: 0.125rem solid var(--black);
}

body[light-mode="light"] .footer-col h4 {
	color: var(--black);
}

body[light-mode="light"] .footer-col a {
	color: var(--black);
}

body[light-mode="light"] .footer-col ul li a:hover {
	color: unset;
}

body[light-mode="light"] .footer-col .social-links a {
	color: var(--black);
}

body[light-mode="light"] .footer-col .social-links a:hover {
	color: var(--white);
	background-color: var(--black);
}

body[light-mode="light"] .accordion li {
	background: var(--white);
	box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.25),
		-6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

body[light-mode="light"] .card {
	background-color: rgba(0, 0, 0, 0.1);
}

body[light-mode="light"] .card-content {
	background-color: var(--white);
}

body[light-mode="light"] .card::before {
	background: radial-gradient(
		800px circle at var(--mouse-x) var(--mouse-y),
		rgba(0, 0, 0, 0.06),
		transparent 40%
	);
}

body[light-mode="light"] .card::after {
	background: radial-gradient(
		600px circle at var(--mouse-x) var(--mouse-y),
		rgba(0, 0, 0, 0.4),
		transparent 40%
	);
}